<template>
    <div class="app-top-nav">
        <div class="w">
            <ul>
                <template v-if="userInfo.token">
                    <li>
                        <a href="javascript:;">{{ userInfo.username }}</a>
                    </li>
                    <li>
                        <a href="javascript:;">退出登陆</a>
                    </li>
                </template>
                <li v-else>
                    <a href="javascript:;">登陆/注册</a>
                </li>
                <li><a href="javascript:;">我的订单</a></li>
                <li><a href="javascript:;">会员</a></li>
                <li><a href="javascript:;">甄选家</a></li>
                <li><a href="javascript:;">企业采购</a></li>
                <li><a href="javascript:;">客户服务 </a></li>
                <li>
                    <a href="javascript:;">
                        <i class="iconfont icon-shouji"></i>
                        APP</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import { useStore } from 'vuex'
import { computed } from 'vue'

export default {
    setup(props) {
        const store = useStore();
        let userInfo = computed(() => {
            return store.state.user.userInfo;
        })
        return { userInfo }
    }
}
</script>

<style lang="less" scoped>
// @import url('@/assets/styles/variables.less');

.app-top-nav {
    background-color: #333;


    ul {
        display: flex;
        height: 40px;
        line-height: 40px;
        justify-content: flex-end;

        li {
            a {
                font-size: 12px;
                padding: 0px 10px;
                color: #ccc;
                border-left: 1px solid #ccc;

                &:hover {
                    color: @xtxColor;
                }
            }
        }

        li:nth-child(1) {
            a {
                border-left: 0;
            }
        }
    }
}
</style>
